【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

語法糖（Syntactic sugar）是這語法對語言的功能沒有影響，但是更方便程式設計師使用，例如更簡潔或是可讀性更高
在ES6就有不少語法糖，它們並不會影響運作，邏輯與原本JavaScript語法一樣，但可以更簡潔
本篇就節錄幾個我學到的ES6語法糖：

物件內方法縮寫

一般我們撰寫物件內的方法會是這樣：

const obj = {
    fn: function(){
        console.log("helloWorld!");
    }
}

ES6的語法糖讓我們可以對其進行縮寫，變成這樣：

const obj = {
    fn(){
        console.log("helloWorld!");
    }
}

物件內使用變數

原本我們要在物件內使用變數會像這個樣子：

const person = {
    name: "小明"
};
const people = {
    person: person
};

當我們在物件people中想要把變數person加進來做為屬性person的值時，要寫person: person
但ES6的語法糖讓我們在屬性與變數名稱一致時可以對其進行縮寫，變成這樣：

const person = {
    name: "小明"
};
const people = {
    person
};

用展開連接陣列

過去我們合併陣列會使用新陣列 = 陣列A.concat(陣列B);

const array1 = [1];
const array2 = [2, 3];
const array3 = array1.concat(array2);

但ES6的語法糖讓我們可以使用展開的方式：

const array1 = [1];
const array2 = [2, 3];
const array3 = [...array1, ...array2];

展開還可以用在將類陣列變為陣列：

const dom = document.querySelectorAll("li");
const newDom = [...dom]; //陣列

透過document.querySelectorAll()得到的會是節點陣列，屬於類陣列，和陣列並不一樣，能使用的方法也有限
透過展開就可以將其轉為純陣列

預設值

以前我們在加入預設值可能會是這樣：

function sum(a, b){
    if(!b){
        b = 1
    }
    return a + b
}
console.log(sum(1)); //2

透過if判斷式檢測b是否存在，不存在則給予一個預設值
ES6讓我們可以這樣寫：

function sum(a, b = 1){
    return a + b
}
console.log(sum(1)); //2